<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p024}}
				</view>
				<view @click="$tool.navTo('/pages/property/huazhuanjilu')" class="flex-1 text-alignR A-Medium record"
					:class="model=='light'?'recordLight':''">
					<view class="pr-3">
						{{i18n.p025}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 24rpx;">

		</view>
		<view class="flex mx-3 align-center justify-between">
			<view class="topTitle A-Medium" :class="model=='light'?'topTitleLight':''">
				{{i18n.p026}}
			</view>
			<view class="record" :class="model=='light'?'topTitleLight':''">
				{{coinType}}
			</view>
		</view>
		<view class="topTitle mt-4 A-Medium ml-3" :class="model=='light'?'topTitleLight':''">
			{{i18n.p027}}
		</view>
		<view class="flex ml-3 record D-Bold align-end" style="margin-top: 24rpx;"
			:class="model=='light'?'recordLight':''">
			<view class="mr-1" style="font-size: 48rpx;font-weight: bold;">
				{{
						coinType=='USDT'?USDTMoney.a:
						coinType=='BTC'?BTCMoney.a:
						coinType=='ETH'?ETHMoney.a:''
					}}
			</view>
			<view class="mb-1">
				{{coinType}}
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				{{i18n.p028}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="account" :placeholder="i18n2.st023" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="f0">
					<image style="width: 18rpx;height: 12rpx;" :src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				{{i18n.p029}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input v-model="transferAmount" type="text" :placeholder="i18n2.st024" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view @click="all" class="codeText">
					{{i18n.p030}}
				</view>
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				{{i18n.p031}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input v-model="remark" type="text" :placeholder="i18n2.st025" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">

			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-6 clickCss">
			{{i18n.p032}}
		</view>
		<view style="margin-top: 66rpx;" class="recordWrap A-Regular mx-3 py-4 px-3"
			:class="model=='light'?'recordWrapLight':''">
			<view class="text4" :style="model=='light'?'color: #0E0F11;':''">
				{{i18n.p033}}
			</view>
			<view class="text5 my-2">
				1、{{i18n.p034}}<br> 2、{{i18n.p035}}
			</view>
		</view>
		<view class="" style="height: 30rpx;">

		</view>
	</view>
</template>

<script>
	import {
		transferAdd
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				coinType:'',
				remark:'',
				transferAmount:'',
				account:'',
				money:123,
				isSubmit:false,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.coinType = uni.getStorageSync('hzType');
		},
		onShow() {
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			},
			USDTMoney(){
				return this.$store.state.config.USDTMoney
			},
			BTCMoney(){
				return this.$store.state.config.BTCMoney
			},
			ETHMoney(){
				return this.$store.state.config.ETHMoney
			},
		},
		methods:{
			submit(){
				if(this.account==='') return this.$tool.showToast(this.i18n2.st023);
				if(this.transferAmount==='') return this.$tool.showToast(this.i18n2.st024);
				// if(this.remark==='') return this.$tool.showToast(this.i18n2.st025);
				let data = {
					mobileUserId:uni.getStorageSync('mobileUserId'),
					coinType:this.coinType,
					remark:this.remark,
					transferAmount:this.transferAmount
				};
				if(this.account.indexOf('@')==-1){
					data.transferMobileNumber = this.account;
				}else{
					data.transferEmail = this.account;
				}
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				transferAdd(data).then(res=>{
					uni.hideLoading();
					this.$tool.showToast(this.i18n2.st022);
					setTimeout(res=>{
						this.$tool.goBack();
					},800)
				}).catch(res=>{
					this.isSubmit = false;
					uni.hideLoading();
				})
			},
			all(){
				
				this.transferAmount = this.coinType=='USDT'?this.USDTMoney.a:
				this.coinType=='BTC'?this.BTCMoney.a:
				this.coinType=='ETH'?this.ETHMoney.a:''
			}
		}
	}
</script>

<style scoped lang="scss">
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.topTitle {
		font-size: 28rpx;
		color: #7F838D;
	}

	.topTitleLight {
		color: #0E0F11;
	}

	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}

		.inputWrap {
			width: 690rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordWrap {
		margin-top: 104rpx;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
			margin-top: 44rpx;
			margin-bottom: 46rpx;
		}

		.text2 {
			font-size: 22rpx;
			color: #7F838D;
			margin-top: 42rpx;
			margin-bottom: 32rpx;
		}

		.text3 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text4 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.text5 {
			font-size: 20rpx;
			color: #EBAC00;
		}

		.text6 {
			font-size: 22rpx;
			color: #7F838D;
		}
	}

	.recordWrapLight {}
</style>